<template>
	<div class="timer-picker">
    <van-popup
      v-model="showPopup"
      position="bottom"
      :style="{ height: '40%' }">
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        :min-date="showMinDate"
        :max-date="showMaxDate"
        :formatter="formatter"
        @confirm="handleClickConfirm"
        @cancel="handleClickCancel"
      />
    </van-popup>
  </div>
</template>

<script>
/**
   * @Author: yqe@360shop.cn
   * @Date: 2019-12-03 11:14:07
 * @Last Modified by: zhangmeng
 * @Last Modified time: 2020-07-13 09:31:26
   */
import Vue from 'vue'
import { Popup, DatetimePicker } from 'vant'
import 'vant/lib/index.css'

Vue.use(DatetimePicker)
Vue.use(Popup)

export default Vue.extend({
  name: 'index',
  data() {
    return {
      showMinDate: null,
      showMaxDate: null,
      showPopup: undefined,
      currentDate: undefined
    }
  },
  props: {
    value: {
      type: String,
      default: new Date()
    },
    visible: {
      type: Boolean,
      default: false
    },
    // minDate: {
    //   type: String
    // },
    maxDate: {
      type: String
    }
  },
  watch: {
    value(val) {
      this.currentDate = new Date(val)
    },
    showPopup(val) {
      this.$emit('update:visible', val)
    },
    visible(val) {
      this.showPopup = val
    }
  },
  created() {
    this.currentDate = new Date()
    const curYear = this.currentDate.getFullYear()
    const curMonth = this.currentDate.getMonth()
    const curDate = this.currentDate.getDate()
    if (this.minDate) {
      this.showMinDate = new Date(this.minDate)
    } else {
      this.showMinDate = new Date(Number(curYear), curMonth, 1)
    }
    if (this.maxDate) {
      this.showMaxDate = new Date(this.maxDate)
    } else {
      this.showMaxDate = new Date(Number(curYear) + 10, curMonth, curDate)
    }
  },
  methods: {
    /**
       * 格式化显示时间
       */
    formatter(type, value) {
      if (type === 'year') {
        return `${value}年`
      } else if (type === 'month') {
        return `${value}月`
      } else if (type === 'day') {
        return `${value}日`
      }
      return value
    },
    /**
       * 点击确认按钮
       */
    handleClickConfirm() {
        const now = new Date();
        const todayStart = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0, 0);

      if (this.currentDate.getTime() >= todayStart.getTime()) {
        const date = this.currentDate // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
        const Y = `${date.getFullYear()}/`
        const M = `${date.getMonth() + 1 < 10 ? `0${date.getMonth() + 1}` : date.getMonth() + 1}/`
        const D = date.getDate() < 10 ? `0${date.getDate()}` : date.getDate()
        // console.log(Y, M, D, '日期>>>>>>')
        const dateTime = Y + M + D
        this.$emit('input', dateTime)
        this.showPopup = false
      } else {
        const date1 = new Date()
        const Y1 = `${date1.getFullYear()}/`
        const M1 = `${date1.getMonth() + 1 < 10 ? `0${date1.getMonth() + 1}` : date1.getMonth() + 1}/`
        const D1 = date1.getDate() < 10 ? `0${date.getDate()}` : date1.getDate()
        const dateTime1 = Y1 + M1 + D1
        this.$Error('当前时间不可选，请选择'+ dateTime1 +'及之后的日期')
      }
    },
    /**
       * 点击取消按钮
       */
    handleClickCancel() {
      this.showPopup = false
    }
  }
})
</script>

<style >

</style>
